<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>月报表</title>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <link rel="stylesheet" href="//cdnhhmk.oss-cn-shenzhen.aliyuncs.com/libs/admin.index.css">
    <link rel="stylesheet" href="//cdnhhmk.oss-cn-shenzhen.aliyuncs.com/libs/admin.reset.css">
    <style>
        .main-container {
            padding: 20px;
            box-sizing: border-box;
        }
        .report-container {
            width: 660px;
            display: inline-block;
            margin-bottom:20px;
            margin-right: 20px;
        }
        .report-content {
            padding: 20px;
            width:600px;
            height:400px;
            position:relative
        }
    </style>
</head>

<body style="display: none;">
<div id="app" class="container" flex>
    <el-admin-menu :user-detail="userDetail" :menus="menus" @logout="logout">
        <div class="content-container" flex-box=1 flex="dir:top">
            <div flex-box="0" class="tab-menu" flex="cross:center">
                <div class="title" flex-box=0>ECHART报表2（悦健康）</div>
            </div>
            <div flex-box="1">
                <div class="main-container">

                    <!--分城市公众号用户分布总表-->
                    <div class="report-container">
                        <el-section-pannel title="分城市公众号用户分布总表" border="all" title-padding="0px 20px">
                            <div slot="content" class="custom-content">
                                <div class="report-content">
                                    <v-chart ref="cityPublicWechatTotalReport" :options="cityPublicWechatTotalReport" />
                                </div>
                                <el-table
                                        :data="cityPublicWechatTotalReport_list"
                                        stripe
                                        height="400"
                                        style="width: 100%">
                                    <el-table-column
                                            prop="city"
                                            label="城市"
                                            width="180">
                                    </el-table-column>
                                    <el-table-column
                                            prop="peopleNum"
                                            label="用户数">
                                    </el-table-column>
                                </el-table>
                            </div>
                        </el-section-pannel>
                    </div>

                    <!--分城市月龄分布总表-->
                    <div class="report-container">
                        <el-section-pannel title="分城市月龄分布总表" border="all" title-padding="0px 20px">
                            <div slot="operator">
                                <el-select v-model="cityAreaId" placeholder="请选择">
                                    <el-option
                                            v-for="item in runningAreaList"
                                            :key="item.cityAreaId"
                                            :label="item.cityAreaName"
                                            :value="item.cityAreaId"
                                            change="cityChange">
                                    </el-option>
                                </el-select>
                            </div>
                            <div slot="content" class="custom-content">
                                <div class="report-content">
                                    <v-chart ref="cityAgeTotalReport" :options="cityAgeTotalReport" />
                                </div>
                            </div>
                        </el-section-pannel>
                    </div>

                    <!--分城市社群用户分布总表-->
                    <div class="report-container">
                        <el-section-pannel title="分城市社群用户分布总表" border="all" title-padding="0px 20px">
                            <div slot="content" class="custom-content">
                                <div class="report-content">
                                    <v-chart ref="cityWechatTotalReport" :options="cityWechatTotalReport" />
                                </div>
                                <div class="report-content">
                                    <el-table
                                            :data="cityWechatTotalReport_list"
                                            stripe
                                            height="400"
                                            style="width: 100%">
                                        <el-table-column
                                                prop="city"
                                                label="城市"
                                                width="180">
                                        </el-table-column>
                                        <el-table-column
                                                prop="peopleNum"
                                                label="用户数">
                                        </el-table-column>
                                    </el-table>
                                </div>
                            </div>
                        </el-section-pannel>
                    </div>

                    <!--医院情况总表-->
                    <div class="report-container">
                        <el-section-pannel title="医院情况总表" border="all" title-padding="0px 20px">
                            <div slot="content" class="custom-content">
                                <div class="report-content">
                                    <v-chart ref="hospitalTotalReport" :options="hospitalTotalReport" />
                                </div>
                            </div>
                        </el-section-pannel>
                    </div>

                    <!--服务机构情况总表-->
                    <div class="report-container">
                        <el-section-pannel title="医院情况总表" border="all" title-padding="0px 20px">
                            <div slot="content" class="custom-content">
                                <div class="report-content">
                                    <v-chart ref="instituteCitySummaryReport" :options="instituteCitySummaryReport" />
                                </div>
                            </div>
                        </el-section-pannel>
                    </div>

                    <!--分城市订单总表-->
                    <div class="report-container">
                        <el-section-pannel title="分城市订单总表" border="all" title-padding="0px 20px">
                            <div slot="operator">
                                <el-date-picker
                                        v-model="orderCitySummaryReport_date"
                                        type="month"
                                        placeholder="选择月">
                                </el-date-picker>
                            </div>
                            <div slot="content" class="custom-content">
                                <div class="report-content">
                                    <v-chart ref="orderCitySummaryReport" :options="orderCitySummaryReport" />
                                </div>
                            </div>
                        </el-section-pannel>
                    </div>

                    <!--商品版块分析-->
                    <div class="report-container">
                        <el-section-pannel title="商品版块分析" border="all" title-padding="0px 20px">
                            <div slot="content" class="custom-content">
                                <div class="report-content">
                                    <v-chart ref="activityBlockReport" :options="activityBlockReport" />
                                </div>
                            </div>
                        </el-section-pannel>
                    </div>

                    <!--商家分类分析-->
                    <div class="report-container">
                        <el-section-pannel title="商家分类分析" border="all" title-padding="0px 20px">
                            <div slot="content" class="custom-content">
                                <div class="report-content">
                                    <v-chart ref="supplierTypeReport" :options="supplierTypeReport" />
                                </div>
                            </div>
                        </el-section-pannel>
                    </div>

                    <!--分城市商家归类月表订单分析-->
                    <div class="report-container">
                        <el-section-pannel title="分城市商家归类月表订单" border="all" title-padding="0px 20px">
                            <div slot="operator">
                                <el-select v-model="supplierTypeOrderByCityMonthReport_cityAreaId" placeholder="请选择城市">
                                    <el-option
                                            v-for="item in runningAreaList"
                                            :key="item.cityAreaId"
                                            :label="item.cityAreaName"
                                            :value="item.cityAreaId"
                                            change="cityChange">
                                    </el-option>
                                </el-select>
                                <el-date-picker
                                        v-model="supplierTypeOrderByCityMonthReport_date"
                                        type="month"
                                        placeholder="选择月">
                                </el-date-picker>
                            </div>
                            <div slot="content" class="custom-content">
                                <div class="report-content">
                                    <v-chart ref="supplierTypeOrderByCityMonthReport" :options="supplierTypeOrderByCityMonthReport" />
                                </div>
                            </div>
                        </el-section-pannel>
                    </div>

                    <!--订单复购数分布-->
                    <div class="report-container">
                        <el-section-pannel title="订单复购数分布" border="all" title-padding="0px 20px">
                            <div slot="operator">
                                <el-date-picker
                                        unlink-panels
                                        v-model="orderRepeatPurchaseReport_date"
                                        type="daterange"
                                        range-separator="至"
                                        start-placeholder="开始日期"
                                        end-placeholder="结束日期">
                                </el-date-picker>
                            </div>
                            <div slot="content" class="custom-content">
                                <div class="report-content">
                                    <v-chart ref="orderRepeatPurchaseReport" :options="orderRepeatPurchaseReport" />
                                </div>
                            </div>
                        </el-section-pannel>
                    </div>

                    <!--商家分类订单复购率分析-->
                    <div class="report-container">
                        <el-section-pannel title="商家分类订单复购率分析" border="all" title-padding="0px 20px">
                            <div slot="operator">
                                <el-date-picker
                                        unlink-panels
                                        v-model="supplierTypeOrderRepeatPurchaseReport_date"
                                        type="daterange"
                                        range-separator="至"
                                        start-placeholder="开始日期"
                                        end-placeholder="结束日期">
                                </el-date-picker>
                            </div>
                            <div slot="content" class="custom-content">
                                <div class="report-content">
                                    <v-chart ref="supplierTypeOrderRepeatPurchaseReport" :options="supplierTypeOrderRepeatPurchaseReport" />
                                </div>
                            </div>
                        </el-section-pannel>
                    </div>

                    <!--群效果表-->
                    <div class="report-container">
                        <el-section-pannel title="群效果表" border="all" title-padding="0px 20px">
                            <div slot="operator">
                                <el-date-picker
                                        unlink-panels
                                        v-model="groupEffectReportService_date"
                                        type="daterange"
                                        range-separator="至"
                                        start-placeholder="开始日期"
                                        end-placeholder="结束日期">
                                </el-date-picker>
                            </div>
                            <div slot="content" class="custom-content">
                                <el-table
                                        :data="groupEffectReportService"
                                        stripe
                                        height="400"
                                        style="width: 100%">
                                    <el-table-column
                                            prop="name"
                                            label="群名"
                                            width="180">
                                    </el-table-column>
                                    <el-table-column
                                            prop="pv"
                                            label="PV">
                                    </el-table-column>
                                    <el-table-column
                                            prop="uv"
                                            label="UV">
                                    </el-table-column>
                                    <el-table-column
                                            prop="orderCount"
                                            label="订单数">
                                    </el-table-column>
                                </el-table>
                            </div>
                        </el-section-pannel>
                    </div>

                    <!--小助手效果表-->
                    <div class="report-container">
                        <el-section-pannel title="小助手效果表" border="all" title-padding="0px 20px">
                            <div slot="operator">
                                <el-date-picker
                                        unlink-panels
                                        v-model="littleHelperEffectReportService_date"
                                        type="daterange"
                                        range-separator="至"
                                        start-placeholder="开始日期"
                                        end-placeholder="结束日期">
                                </el-date-picker>
                            </div>
                            <div slot="content" class="custom-content">
                                <el-table
                                        :data="littleHelperEffectReportService"
                                        stripe
                                        height="400"
                                        style="width: 100%">
                                    <el-table-column
                                            prop="name"
                                            label="小助手名称"
                                            width="180">
                                    </el-table-column>
                                    <el-table-column
                                            prop="pv"
                                            label="PV">
                                    </el-table-column>
                                    <el-table-column
                                            prop="uv"
                                            label="UV">
                                    </el-table-column>
                                    <el-table-column
                                            prop="orderCount"
                                            label="订单数">
                                    </el-table-column>
                                </el-table>
                            </div>
                        </el-section-pannel>
                    </div>

                    <!--社群月留存率-->
                    <div class="report-container">
                        <el-section-pannel title="社群月留存率" border="all" title-padding="0px 20px">
                            <div slot="content" class="custom-content">
                                <el-table
                                        :data="wechatRetainMonthReportService"
                                        stripe
                                        height="400"
                                        style="width: 100%">
                                    <el-table-column
                                            prop="month"
                                            label="月"
                                            width="180">
                                    </el-table-column>
                                    <el-table-column
                                            prop="retention"
                                            label="留存率">
                                    </el-table-column>
                                </el-table>
                            </div>
                        </el-section-pannel>
                    </div>

                </div>
            </div>
        </div>
    </el-admin-menu>
</div>
</body>
<style>
    /**
  * The default size is 600px×400px, for responsive charts
  * you may need to set percentage values as follows (also
  * don't forget to provide a size for the container).
  */
    .echarts {
        width: 100%;
        height: 100%;
    }
</style>
<script src="common/config.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script>
  window.jQuery || document.write('<script src="//cdn.staticfile.org/jquery/3.1.1/jquery.min.js"><\/script>')
</script>
<script src="testdata/test_data.js"></script>
<script src="//cdnhhmk.oss-cn-shenzhen.aliyuncs.com/libs/admin.index.js"></script>
<script src="//cdnhhmk.oss-cn-shenzhen.aliyuncs.com/libs/admin.common.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@4.1.0/dist/echarts.js"></script>
<!-- <script src="./lib/echarts.min.js"></script> -->
<script src="https://cdn.jsdelivr.net/npm/vue-echarts@4.0.2"></script>

<!--分城市公众号用户分布总表-->
<script>
  var cityPublicWechatTotalReportMixins = {
    data:function(){
      return {
        cityPublicWechatTotalReport: null,
        cityPublicWechatTotalReport_list: null
      }
    },
    methods:{
      //分城市公众号用户分布总表
      cityPublicWechatTotalReportFetch(){
        var that = this;
        $.base.sendHttpRequest(makePath('report','/cityPublicWechatTotalReportService'), {},
          function(resp){
            console.log(JSON.stringify(resp));
            if(resp.data.reportList){
              var list = resp.data.reportList||[];
              that.cityPublicWechatTotalReport_list = list;
              that.cityPublicWechatTotalReport = {
                title: {
                  text: '分城市公众号用户分布总表'
                },
                color: ['#FB7171'],
                toolbox: {
                  feature: {
                    saveAsImage: {}
                  }
                },
                tooltip : {
                  trigger: 'axis',
                  axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                  }
                },
                xAxis : [
                  {
                    type : 'category',
                    data : list.map(function (item) {
                      return item.city
                    }),
                    axisTick: {
                      alignWithLabel: true
                    }
                  }
                ],
                yAxis : {
                  type : 'value'
                },
                series : [
                  {
                    label: {
                      normal: {
                        show: true,
                        position: 'top'
                      }
                    },
                    name:'用户数',
                    type:'bar',
                    barWidth: '60%',
                    data:list.map(function (item) {
                      return item.peopleNum
                    })
                  }
                ]
              }
            }
          }, function(complete){}, function(error){})
      },
    },
    mounted(){
      this.cityPublicWechatTotalReportFetch();
    },
    watch:{
    }
  }
</script>

<!--分城市月龄分布总表-->
<script>
  var cityAgeTotalReportMixins = {
    data:function(){
      return {
        cityAgeTotalReport: null,
        cityAreaId: null
      }
    },
    methods:{
      //分城市月龄分布总表
      cityAgeTotalReportFetch(){
        var that = this;
        $.base.sendHttpRequest(makePath('report','/cityAgeTotalReportService'), {city: that.cityAreaId},
          function(resp){
            console.log(JSON.stringify(resp));
            if(resp.data.reportList){
              var list = resp.data.reportList||[];
              that.cityAgeTotalReport = {
                title: {
                  text: '分城市月龄分布总表'
                },
                color: ['#FB7171'],
                tooltip : {
                  trigger: 'axis',
                  axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                  }
                },
                toolbox:{
                  feature: {
                    saveAsImage: {}
                  }
                },
                xAxis : [
                  {
                    type : 'category',
                    data : list.map(function (item) {
                      return item.age
                    }),
                    axisTick: {
                      alignWithLabel: true
                    }
                  }
                ],
                yAxis : {
                  type : 'value'
                },
                series : [
                  {
                    label: {
                      normal: {
                        show: true,
                        position: 'top'
                      }
                    },
                    name:'用户数',
                    type:'bar',
                    barWidth: '60%',
                    data:list.map(function (item) {
                      return item.peopleNum
                    })
                  }
                ]
              }
            }
          }, function(complete){}, function(error){})
      },
    },
    mounted(){
      this.cityAgeTotalReportFetch();
    },
    watch:{
      cityAreaId(val){
        this.cityAgeTotalReportFetch();
      }
    }
  }
</script>

<!--分城市社群用户分布总表-->
<script>
  var cityWechatTotalReportMixins = {
    data:function(){
      return {
        cityWechatTotalReport: null,
        cityWechatTotalReport_list: null
      }
    },
    methods:{
      //分城市社群用户分布总表
      cityWechatTotalReportFetch(){
        var that = this;
        $.base.sendHttpRequest(makePath('report','/cityWechatTotalReportService'), {},
          function(resp){
            console.log(JSON.stringify(resp));
            if(resp.data.reportList){
              var list = resp.data.reportList||[];
              that.cityWechatTotalReport_list = list;
              that.cityWechatTotalReport = {
                title: {
                  text: '分城市社群用户分布总表'
                },
                color: ['#FB7171'],
                tooltip : {
                  trigger: 'axis',
                  axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                  }
                },
                toolbox:{
                  feature: {
                    saveAsImage: {}
                  }
                },
                xAxis : [
                  {
                    type : 'category',
                    data : list.map(function (item) {
                      return item.city
                    }),
                    axisTick: {
                      alignWithLabel: true
                    }
                  }
                ],
                yAxis : {
                  type : 'value'
                },
                series : [
                  {
                    label: {
                      normal: {
                        show: true,
                        position: 'top'
                      }
                    },
                    name:'用户数',
                    type:'bar',
                    barWidth: '60%',
                    data:list.map(function (item) {
                      return item.peopleNum
                    })
                  }
                ]
              }
            }
          }, function(complete){}, function(error){})
      },
    },
    mounted(){
      this.cityWechatTotalReportFetch();
    },
    watch:{
    }
  }
</script>

<!--医院情况总表-->
<script>
  var hospitalTotalReportMixins = {
    data:function(){
      return {
        hospitalTotalReport: null,
      }
    },
    methods:{
      //医院情况总表
      hospitalTotalReportFetch(){
        var that = this;
        $.base.sendHttpRequest(makePath('report','/hospitalTotalReportService'), {},
          function(resp){
            console.log(JSON.stringify(resp));
            if(resp.data.reportList){
              var list = resp.data.reportList||[];
              that.hospitalTotalReport = {
                title: {
                  text: '医院情况总表'
                },
                color: ['#FB7171'],
                tooltip : {
                  trigger: 'axis',
                  axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                  }
                },
                toolbox:{
                  feature: {
                    saveAsImage: {}
                  }
                },
                xAxis : [
                  {
                    type : 'category',
                    data : list.map(function (item) {
                      return item.city
                    }),
                    axisTick: {
                      alignWithLabel: true
                    }
                  }
                ],
                yAxis : {
                  type : 'value'
                },
                series : [
                  {
                    label: {
                      normal: {
                        show: true,
                        position: 'top'
                      }
                    },
                    name:'医院数',
                    type:'bar',
                    barWidth: '60%',
                    data:list.map(function (item) {
                      return item.hospitalNum
                    })
                  }
                ]
              }
            }
          }, function(complete){}, function(error){})
      },
    },
    mounted(){
      this.hospitalTotalReportFetch();
    },
    watch:{
    }
  }
</script>

<!--服务机构情况总表-->
<script>
  var instituteCitySummaryReportMixins = {
    data:function(){
      return {
        instituteCitySummaryReport: null,
      }
    },
    methods:{
      instituteCitySummaryReportFetch(){
        var that = this;
        $.base.sendHttpRequest(makePath('report','/instituteCitySummaryReport'), {},
          function(resp){
            console.log(JSON.stringify(resp));
            if(resp.data.reportList){
              var list = resp.data.reportList||[];
              that.instituteCitySummaryReport = {
                title: {
                  text: '服务机构情况总表'
                },
                color: ['#FB7171'],
                tooltip : {
                  trigger: 'axis',
                  axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                  }
                },
                toolbox:{
                  feature: {
                    saveAsImage: {}
                  }
                },
                xAxis : [
                  {
                    type : 'category',
                    data : list.map(function (item) {
                      return item.city
                    }),
                    axisTick: {
                      alignWithLabel: true
                    }
                  }
                ],
                yAxis : {
                  type : 'value'
                },
                series : [
                  {
                    label: {
                      normal: {
                        show: true,
                        position: 'top'
                      }
                    },
                    name:'机构数',
                    type:'bar',
                    barWidth: '60%',
                    data:list.map(function (item) {
                      return item.instituteCount
                    })
                  }
                ]
              }
            }
          }, function(complete){}, function(error){})
      },
    },
    mounted:function(){
      this.instituteCitySummaryReportFetch();
    },
    watch:{
    }
  }
</script>

<!--分城市订单总表-->
<script>
  var orderCitySummaryReportMixins = {
    data:function(){
      return {
        orderCitySummaryReport: null,
        orderCitySummaryReport_date: null,
        orderCitySummaryReport_month: null
      }
    },
    methods:{
      orderCitySummaryReportFetch(){
        var that = this;
        $.base.sendHttpRequest(makePath('report','/orderCitySummaryReport'), {month:this.orderCitySummaryReport_month,},
          function(resp){
            console.log(JSON.stringify(resp));
            if(resp.data.reportList){
              var list = resp.data.reportList||[];
              that.orderCitySummaryReport = {
                title: {
                  text: '分城市订单总表'
                },
                color: ['#FB7171'],
                tooltip : {
                  trigger: 'axis',
                  axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                  }
                },
                toolbox:{
                  feature: {
                    saveAsImage: {}
                  }
                },
                xAxis : [
                  {
                    type : 'category',
                    data : list.map(function (item) {
                      return item.city
                    }),
                    axisTick: {
                      alignWithLabel: true
                    }
                  }
                ],
                yAxis : {
                  type : 'value'
                },
                series : [
                  {
                    label: {
                      normal: {
                        show: true,
                        position: 'top'
                      }
                    },
                    name:'订单数',
                    type:'bar',
                    barWidth: '60%',
                    data:list.map(function (item) {
                      return item.orderSummaryCount
                    })
                  }
                ]
              }
            }
          }, function(complete){}, function(error){})
      },
    },
    mounted:function(){
      this.orderCitySummaryReportFetch();
    },
    watch:{
      orderCitySummaryReport_date(val){
        console.log(val);
        var dayStart = (val.getFullYear()+''+MMDD(val.getMonth() + 1));
        this.orderCitySummaryReport_month = dayStart;
        this.orderCitySummaryReportFetch();
      }
    }
  }
</script>

<!--商品版块分析-->
<script>
  var activityBlockReportMixins = {
    data:function(){
      return {
        activityBlockReport: null
      }
    },
    methods:{
      activityBlockReportFetch(){
        var that = this;
        $.base.sendHttpRequest(makePath('report','/activityBlockReport'), {},
          function(resp){
            console.log(JSON.stringify(resp));
            if(resp.data.reportList){
              var list = resp.data.reportList||[];
              var source = list.map(function (item) {
                var arr = [];
                arr.push(item.blockName);
                arr.push(item.PV);
                arr.push(item.UV);
                return arr
              })
              source.unshift(['product', 'PV', 'UV'])
              that.activityBlockReport = {
                title: {
                  text: '商品版块分析'
                },
                legend: {},
                tooltip: {},
                toolbox:{
                  feature: {
                    saveAsImage: {}
                  }
                },
                dataset: {
                  source: source
                },
                xAxis: {type: 'category'},
                yAxis: {},
                series: [
                  {type: 'bar'},
                  {type: 'bar'}
                ]
              }
            }
          }, function(complete){}, function(error){})
      },
    },
    mounted:function(){
      this.activityBlockReportFetch();
    },
    watch:{
    }
  }
</script>

<!--商家分类分析-->
<script>
  var supplierTypeReportMixins = {
    data:function(){
      return {
        supplierTypeReport: null
      }
    },
    methods:{
      supplierTypeReportFetch(){
        var that = this;
        $.base.sendHttpRequest(makePath('report','/supplierTypeReport'), {},
          function(resp){
            console.log(JSON.stringify(resp));
            if(resp.data.reportList){
              var list = resp.data.reportList||[];
              var source = list.map(function (item) {
                var arr = [];
                arr.push(item.supplierTypeName);
                arr.push(item.PV);
                arr.push(item.UV);
                return arr
              })
              source.unshift(['product', 'PV', 'UV'])
              that.supplierTypeReport = {
                title: {
                  text: '商家分类分析'
                },
                legend: {},
                tooltip: {},
                toolbox:{
                  feature: {
                    saveAsImage: {}
                  }
                },
                dataset: {
                  source: source
                },
                xAxis: {type: 'category'},
                yAxis: {},
                series: [
                  {type: 'bar'},
                  {type: 'bar'}
                ]
              }
            }
          }, function(complete){}, function(error){})
      },
    },
    mounted:function(){
      this.supplierTypeReportFetch();
    },
    watch:{
    }
  }
</script>

<!--分城市商家归类月表订单分析-->
<script>
  var supplierTypeOrderByCityMonthReportMixins = {
    data:function(){
      return {
        supplierTypeOrderByCityMonthReport: null,
        supplierTypeOrderByCityMonthReport_cityAreaId: null,
        supplierTypeOrderByCityMonthReport_date: '2019-04'
      }
    },
    methods:{
      supplierTypeOrderByCityMonthReportFetch(){
        var that = this;
        $.base.sendHttpRequest(makePath('report','/supplierTypeOrderByCityMonthReport'),
          {
            city: that.supplierTypeOrderByCityMonthReport_cityAreaId,
            month: that.supplierTypeOrderByCityMonthReport_date
          },
          function(resp){
            console.log(JSON.stringify(resp));
            var list = resp.data.reportList||[];
            that.supplierTypeOrderByCityMonthReport = {
              title : {
                text: '分城市商家归类月表订单分析',
                subtext: '',
                x:'center'
              },
              tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
              },
              toolbox:{
                feature: {
                  saveAsImage: {}
                }
              },
              legend: {
                orient: 'vertical',
                left: 'left',
                data: list.map(function (item) {
                  return item.supplierTypeName
                })
              },
              series : [
                {
                  name: '访问来源',
                  type: 'pie',
                  radius : '55%',
                  center: ['50%', '60%'],
                  data:list.map(function (item) {
                    var obj = {};
                    obj.name = item.supplierTypeName;
                    obj.value = item.orderSummaryCount
                    return obj
                  }),
                  itemStyle: {
                    emphasis: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                  }
                }
              ]
            }
          }, function(complete){}, function(error){})
      },
    },
    mounted:function(){
      this.supplierTypeOrderByCityMonthReportFetch();
    },
    watch:{
      supplierTypeOrderByCityMonthReport_cityAreaId(val){
        console.log(val);
        this.supplierTypeOrderByCityMonthReport_cityAreaId = val;
        this.supplierTypeOrderByCityMonthReportFetch();
      },
      supplierTypeOrderByCityMonthReport_date(val){
        console.log(val);
        var date = (val.getFullYear()+''+val.getMonth());
        this.supplierTypeOrderByCityMonthReport_date = date;
        this.supplierTypeOrderByCityMonthReportFetch();
      }
    }
  }
</script>

<!--订单复购数分布-->
<script>
  var orderRepeatPurchaseReportMixins = {
    data:function(){
      return {
        orderRepeatPurchaseReport: null,
        orderRepeatPurchaseReport_date: null,
        dayStart: null,
        dayEnd: null
      }
    },
    methods:{
      orderRepeatPurchaseReportFetch(){
        var that = this;
        $.base.sendHttpRequest(makePath('report','/orderRepeatPurchaseReport'), {dayStart:this.dayStart,dayEnd:this.dayEnd,},
          function(resp){
            console.log(JSON.stringify(resp));
            if(resp.data.reportList){
              var list = resp.data.reportList||[];
              that.orderRepeatPurchaseReport = {
                title : {
                  text: '订单复购数分布',
                  subtext: '',
                  x:'center'
                },
                tooltip : {
                  trigger: 'item',
                  formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                toolbox:{
                  feature: {
                    saveAsImage: {}
                  }
                },
                legend: {
                  orient: 'vertical',
                  left: 'left',
                  data: list.map(function (item) {
                    return item.repeatPurchaseTimes
                  })
                },
                series : [
                  {
                    name: '访问来源',
                    type: 'pie',
                    radius : '55%',
                    center: ['50%', '60%'],
                    data:list.map(function (item) {
                      var obj = {};
                      obj.name = item.repeatPurchaseTimes;
                      obj.value = item.userCount
                      return obj
                    }),
                    itemStyle: {
                      emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                      }
                    }
                  }
                ]
              }
            }
          }, function(complete){}, function(error){})
      },
    },
    mounted:function(){
      this.orderRepeatPurchaseReportFetch();
    },
    watch:{
      orderRepeatPurchaseReport_date(val){
        console.log(val);
        var start = val[0];
        var end = val[1];
        var dayStart = (start.getFullYear()+''+start.getMonth()+''+start.getDate());
        var dayEnd = (end.getFullYear()+''+end.getMonth()+''+end.getDate());
        this.dayStart = dayStart;
        this.dayEnd = dayEnd;
        this.orderRepeatPurchaseReportFetch();
      }
    }
  }
</script>

<!--商家分类订单复购率分析-->
<script>
  var supplierTypeOrderRepeatPurchaseReportMixins = {
    data:function(){
      return {
        supplierTypeOrderRepeatPurchaseReport: null,
        supplierTypeOrderRepeatPurchaseReport_date: null,
        dayStart: null,
        dayEnd: null
      }
    },
    methods:{
      supplierTypeOrderRepeatPurchaseReportFetch(){
        var that = this;
        $.base.sendHttpRequest(makePath('report','/supplierTypeOrderRepeatPurchaseReport'), {dayStart:this.dayStart,dayEnd:this.dayEnd,},
          function(resp){
            console.log(JSON.stringify(resp));
            if(resp.data.reportList){
              var list = resp.data.reportList||[];
              that.supplierTypeOrderRepeatPurchaseReport = {
                title : {
                  text: '订单复购数分布',
                  subtext: '',
                  x:'center'
                },
                tooltip : {
                  trigger: 'item',
                  formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                toolbox:{
                  feature: {
                    saveAsImage: {}
                  }
                },
                legend: {
                  orient: 'vertical',
                  left: 'left',
                  data: list.map(function (item) {
                    return item.supplierTypeName
                  })
                },
                series : [
                  {
                    name: '访问来源',
                    type: 'pie',
                    radius : '55%',
                    center: ['50%', '60%'],
                    data:list.map(function (item) {
                      var obj = {};
                      obj.name = item.supplierTypeName;
                      obj.value = item.repeatPurchaseRate
                      return obj
                    }),
                    itemStyle: {
                      emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                      }
                    }
                  }
                ]
              }
            }
          }, function(complete){}, function(error){})
      },
    },
    mounted:function(){
      this.supplierTypeOrderRepeatPurchaseReportFetch();
    },
    watch:{
      supplierTypeOrderRepeatPurchaseReport_date(val){
        console.log(val);
        var start = val[0];
        var end = val[1];
        var dayStart = (start.getFullYear()+''+start.getMonth()+''+start.getDate());
        var dayEnd = (end.getFullYear()+''+end.getMonth()+''+end.getDate());
        this.dayStart = dayStart;
        this.dayEnd = dayEnd;
        this.supplierTypeOrderRepeatPurchaseReportFetch();
      }
    }
  }
</script>

<!--群效果表-->
<script>
  var groupEffectReportServiceMixins = {
    data:function(){
      return {
        groupEffectReportService: null,
        groupEffectReportService_date: null,
        groupEffectReportService_dayStart: null,
        groupEffectReportService_dayEnd: null
      }
    },
    methods:{
      groupEffectReportServiceFetch(){
        var that = this;
        $.base.sendHttpRequest(makePath('report','/groupEffectReportService'), {
          dayStart:this.groupEffectReportService_dayStart,
            dayEnd:this.groupEffectReportService_dayEnd},
          function(resp){
            console.log(JSON.stringify(resp));
            if(resp.data.list){
              var list = resp.data.list||[];
              that.groupEffectReportService = list;
            }
          }, function(complete){}, function(error){})
      },
    },
    mounted:function(){
      this.groupEffectReportServiceFetch();
    },
    watch:{
      groupEffectReportService_date(val){
        console.log(val);
        var start = val[0];
        var end = val[1];
        var dayStart = (start.getFullYear()+'-'+start.getMonth()+'-'+start.getDate());
        var dayEnd = (end.getFullYear()+'-'+end.getMonth()+'-'+end.getDate());
        this.groupEffectReportService_dayStart = dayStart;
        this.groupEffectReportService_dayEnd = dayEnd;
        this.groupEffectReportServiceFetch();
      }
    }
  }
</script>

<!--小助手效果表-->
<script>
  var littleHelperEffectReportServiceMixins = {
    data:function(){
      return {
        littleHelperEffectReportService: null,
        littleHelperEffectReportService_date: null,
        littleHelperEffectReportService_dayStart: null,
        littleHelperEffectReportService_dayEnd: null
      }
    },
    methods:{
      littleHelperEffectReportServiceFetch(){
        var that = this;
        $.base.sendHttpRequest(makePath('report','/littleHelperEffectReportService'), {
            dayStart:this.littleHelperEffectReportService_dayStart,
            dayEnd:this.littleHelperEffectReportService_dayEnd},
          function(resp){
            console.log(JSON.stringify(resp));
            if(resp.data.list){
              var list = resp.data.list||[];
              that.littleHelperEffectReportService = list;
            }
          }, function(complete){}, function(error){})
      },
    },
    mounted:function(){
      this.littleHelperEffectReportServiceFetch();
    },
    watch:{
      littleHelperEffectReportService_date(val){
        console.log(val);
        var start = val[0];
        var end = val[1];
        var dayStart = (start.getFullYear()+'-'+start.getMonth()+'-'+start.getDate());
        var dayEnd = (end.getFullYear()+'-'+end.getMonth()+'-'+end.getDate());
        this.littleHelperEffectReportService_dayStart = dayStart;
        this.littleHelperEffectReportService_dayEnd = dayEnd;
        this.littleHelperEffectReportServiceFetch();
      }
    }
  }
</script>

<!--社群月留存率-->
<script>
  var wechatRetainMonthReportServiceMixins = {
    data:function(){
      return {
        wechatRetainMonthReportService: null,
        wechatRetainMonthReportService_date: null,
      }
    },
    methods:{
      wechatRetainMonthReportServiceFetch(){
        var that = this;
        $.base.sendHttpRequest(makePath('report','/wechatRetainMonthReportService'), {},
          function(resp){
            console.log(JSON.stringify(resp));
            if(resp.data.reportList){
              var list = resp.data.reportList||[];
              that.wechatRetainMonthReportService = list;
            }
          }, function(complete){}, function(error){})
      },
    },
    mounted:function(){
      this.wechatRetainMonthReportServiceFetch();
    },
    watch:{
      wechatRetainMonthReportService_date(val){
        console.log(val);
        var dayStart = (val.getFullYear()+''+val.getMonth());
        this.wechatRetainMonthReportService_date = dayStart;
        this.wechatRetainMonthReportServiceFetch();
      }
    }
  }
</script>

<script>
  /**
   * 得到请求链接
   * @param prefix
   * @param path
   */
  function makePath(prefix, path) {
    var reg= new RegExp(/((\.\w+){2}$)/);
    reg.test(window.location.hostname)
    if (path.indexOf('/') !== 0) {
      path = '/' + path
    }
    return window.location.protocol + '//' + prefix + RegExp.$1 + path;
  }
  //月份或者日期MM DD格式
  function MMDD(mmdd) {
    if(mmdd<10){
      return ''+'0'+mmdd;
    }else{
      return ''+mmdd;
    }
  }
  Vue.component('v-chart', VueECharts)
  new Vue({
    el: '#app',
    mixins: [$.base.globalMixin,
      cityPublicWechatTotalReportMixins,
      cityAgeTotalReportMixins,
      cityWechatTotalReportMixins,
      hospitalTotalReportMixins,
      instituteCitySummaryReportMixins,
      orderCitySummaryReportMixins,
      supplierTypeReportMixins,
      activityBlockReportMixins,
      supplierTypeOrderByCityMonthReportMixins,
      orderRepeatPurchaseReportMixins,
      supplierTypeOrderRepeatPurchaseReportMixins,
      groupEffectReportServiceMixins,
      littleHelperEffectReportServiceMixins,
      wechatRetainMonthReportServiceMixins],
    data: function () {
      var data = []
      for (var i = 0; i <= 360; i++) {
        var t = i / 180 * Math.PI;
        var r = Math.sin(2 * t) * Math.cos(2 * t)
        data.push([r, i])
      }
      return {
        username: '',
        enterDate: '',
        visible: false,
        // 来自test_data.js
        menus: menus,
        // 来自test_data.js
        userDetail: userDetail,
        //正在运营城市
        runningAreaList: [],
        //表格数据
        initOptions: {},
      }
    },
    created: function () {
      this.getRunningArea();
    },
    methods: {
      logout:function() {
        window.location.href = 'login.html';
      },
      //获取正在运营城市
      getRunningArea:function(){
        var that = this;
        $.base.sendHttpRequest('http://basic.ihealthcoming.com/getRunningArea', {},
          function(resp){
            console.log(JSON.stringify(resp));
            that.runningAreaList = resp.data.runningAreaList;
          },
          function(complete){},
          function(error){})
      }
    },
    mounted:function() {
      var that = this;
      document.querySelector('body').style.display = 'block';
    }
  });
</script>

</html>